import { React, useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import { HIDE_TABBER, SHOW_TABBER } from "../../store/action-type/tabber";
import { NavBar, Space, Swiper, SearchBar } from "antd-mobile";
import { SearchOutline, MoreOutline, TruckOutline } from "antd-mobile-icons";
import { useHistory } from "react-router-dom";
import "../../MIUIcss/Findtype/meterhome.scss";

function meterhome() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: HIDE_TABBER });
  }, []);
  const { go } = useHistory();
  const { replace, push } = useHistory();
  const back = () => {
    go(-1);
    dispatch({ type: SHOW_TABBER });
  };
  return (
    <div className="Meter-home">
      <div className="meter-nav">
        <NavBar
          right={<span style={{ fontSize: 17 }}>切换</span>}
          onBack={back}
        >
          <span>北京市</span>
        </NavBar>
      </div>
      <hr />
      <div className="meterhome-dianpu">
        <div className="meter-h">
          <h3>附近的小米之家</h3>
        </div>
        <div className="dianpu-meter">
          <img
            src="../../../src/image/Find/dianpu01.png"
            alt=""
            onClick={() => {
              push("/diandetails");
              dispatch({ type: SHOW_TABBER });
            }}
          />
          <div className="desc-box">
            <div className="dianpu-desc">
              <b>小米之家北京朝阳合生汇店</b>
              <span>直营店</span>
            </div>
            <p>
              北京市朝阳区某某路21号合生汇购物中心一层L1-14A
              <br />
              商铺
            </p>
            <i>
              <span>1.01km</span>
            </i>
          </div>
        </div>
      </div>
    </div>
  );
}

export default meterhome;
